<template>
  <gui-page ref="guiPage" :customHeader="true">
    <template v-slot:gHeader>
      <nav-bar-custom :title="$t('navigationBar.chart')"></nav-bar-custom>
    </template>
    <template v-slot:gBody>
    <!--库存数量占比 -->
      <view class="repertory">
        <view class="repertory_title">{{$t('JsInternational.ofStock')}}</view>
        <view class="repertory_number">
          <view class="repertory_number_title">{{$t('JsInternational.amount')}}</view>
          <view class="repertory_number_desc">{{data.pineTotal || 0}}</view>
        </view>
        <view class="repertory_number" style="background-color:#cab6b5">
          <view class="repertory_number_title">{{$t('JsInternational.totalStockCount')}}</view>
          <view class="repertory_number_desc">{{data.totalTrusts || 0}}</view>
        </view>
        <view class="repertory_picture">
          <qiun-data-charts :animation="false" type="ring" :opts="data.ringOpts" :chartData="data.ringChartData" />
        </view>
      </view>
      <view class="repertory">
        <view class="repertory_title">{{$t('JsInternational.stockoutStatistic')}}</view>
        <view class="repertory_number">
          <view class="repertory_number_title">{{$t('JsInternational.amountOfStockout')}}</view>
          <view class="repertory_number_desc">{{data.lineTotal || 0}}</view>
        </view>
        <view class="repertory_number" style="background-color:#cab6b5">
            <view class="repertory_number_title">{{$t('materials.stockoutAmt')}}</view>
            <view class="repertory_number_desc">{{data.tQTY || 0}}</view>
        </view>
        <!-- :animation="false" 关闭charts动画防止兼容问题 -->
        <view class="repertory_picture">
          <qiun-data-charts :animation="false" type="line" :opts="data.lineOpts" :chartData="data.lineChartData" />
        </view>
      </view>
  </template>
  </gui-page>
</template>

<script setup>
import {onMounted,ref,reactive} from 'vue'
import { getPdaReportData,getPdaLineGraph } from '@/api/api.js';
import {onShow} from '@dcloudio/uni-app';

//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

let data=reactive({
  ringChartData: {}, //饼图
  lineChartData: {}, //折现图
  ringOpts: {
    rotate: false,
    rotateLock: false,
    color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4","#1890FF",  "#ea7ccc"],
    dataLabel: true,
    legend: {
      show: true,
      position: "left",
      lineHeight: 30,
      fontSize: 12
    },
    title: {
      name: t('materials.inventoryRatio'),
      fontSize: 12,
      color: "#666666"
    },
    subtitle: {
      name: "100%",
      fontSize: 14,
      color: "#7cb5ec"
    },
    extra: {
      ring: {
        ringWidth: 20,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 10,
        border: true,
        borderWidth: 3,
        borderColor: "#FFFFFF",
        linearType: "custom"
      }
    }
  },
  lineOpts: {
    color: [ "#91CB74","#FAC858", "#EE6666", "#73C0DE", "#3CA272","#FC8452","#9A60B4", "#ea7ccc","#1890FF"],
    padding: [0, 10, 15, 10],
    legend: {
      show: true,
      position: "top",
      lineHeight: 25,
    },
    xAxis: {
      disableGrid: true,
      rotateLabel: true, //是否旋转文字角度
    },
    yAxis: {
      gridType: "dash",
      dashLength: 2,
    },
    extra: {
      line: {
        type: "straight",
        width: 2,
      }
    }
  },
  // 柱状图 数据
  pineTotal:null,
  totalTrusts:null,
  columnList:[],
  columnPerc:[],
  // 折线图数据
  categories:[],
  lineData:[],
  lineTotal:null,
  tQTY:null
})
onShow(() => {
  chartLsit()
})
// onMounted
onMounted(() => {
  repertoryRingChart();
  repertoryLineChart();
});

const chartLsit=()=>{
  // 柱状图
  getPdaReportData().then(res=>{
    console.log(res.data)
    if (res.data == null) {
      return;
    } else {
      data.pineTotal = res.data.sumQTY;
      data.totalTrusts = res.data.totalTrusts;
      data.columnPerc = res.data.codes.map((name, i) => ({ name, "value": Number(res.data.perc[i].toFixed(2)) }))
    }
    
  })
   // 折现图的获取
   getPdaLineGraph().then(res=>{
      data.lineTotal=res.data.sumQTY;
      data.categories=res.data.date;
      data.lineData=res.data.qty;
      data.tQTY =res.data.tQTY
       
  });
}

//  饼图的数据获取
const repertoryRingChart = () => {
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      series: [
        {
          data:data.columnPerc
          // data: [{ "name": "一班", "value": 50 }, { "name": "二班", "value": 30 }, { "name": "三班", "value": 20 }, { "name": "四班", "value": 18 }, { "name": "五班", "value": 8 }]
        }
      ]
    };
    data.ringChartData= JSON.parse(JSON.stringify(res));
  }, 500); 
};

// 山峰图
const repertoryLineChart = () => {
  setTimeout(() => {
    let res = {
      categories: data.categories,
      series: [
        {
          name: t('pageTranslation.qtyOfStockOut'),
          data: data.lineData,
        },
      ],
    };
    data.lineChartData = JSON.parse(JSON.stringify(res));
  }, 500);
};
</script>

<style lang="scss" scoped>
.repertory {
  background: #fff;
  margin-bottom: 20rpx;
  overflow: hidden;
  width: 100%;

  &_title {
    height: 80rpx;
    padding-left: 48rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    font-weight: 600;
  }

  &_number {
    height: 60rpx;
    background-color: #c3d0ec;
    margin: 0 20rpx 20rpx 50rpx;
    display: flex;

    &_title {
      width: 240rpx;
      line-height: 60rpx;
      text-align: left;
      font-size: 26rpx;
      margin-left: 20rpx;
    }
    &_desc {
      flex: 1;
      line-height: 60rpx;
      text-align: right;
      font-size: 26rpx;
      margin-right: 20rpx;
    }
  }

  &_picture {
    height: 440rpx;
    margin: 0 40rpx 0 46rpx;
  }
}

</style>


